import titleIcon from "@/assets/images/dashboard/icon-3.png";
import AutoScroll from "@/utils/autoScroll";
import ItemBlock from "../components/item-block";
import "./right.scss";
import { getCurrentInstance, ComponentInternalInstance, Ref } from "vue";
import { StatDataType, stat } from "@/api/modules/stat/stat";
import { Report } from "@/api/interface/iot";
import { dataFormat } from "@/utils/format";
import mittBus from "@/utils/mittBus";
export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		let box2Ref = ref();
		let scroll2Ref = ref();
		let ts2Ref = ref();
		let scroll: Ref<AutoScroll | undefined> = ref();
		const state = reactive({
			dataList: [] as Report.StatDataInfo[]
		});
		onMounted(() => {
			scroll.value = new AutoScroll(scroll2Ref.value, ts2Ref.value, box2Ref.value);
		});
		const load = async () => {
			let res = await stat({ dataType: StatDataType.DEV_EVENT_LIST, limitCount: 100 });
			state.dataList = res.result as Report.StatDataInfo[];
		};
		const gotoMap = (info: any) => {
			mittBus.emit("gotoMap", info);
		};

		onUnmounted(() => {
			scroll.value?.rollStop();
		});
		expose({ load });
		return () => {
			return (
				<ItemBlock class="event-chart" title={proxy?.$t("index.chart_title.event")}>
					{{
						titleIcon: () => {
							return <el-image src={titleIcon} fil="cover" />;
						},
						default: () => {
							return (
								<el-scrollbar class="scrollBarBox">
									<div
										class="box"
										ref={box2Ref}
										// onMouseover={() => {
										// 	scroll.value?.rollStop();
										// }}
										// onMouseout={() => {
										// 	scroll.value?.rollStart(60);
										// }}
									>
										<div ref={scroll2Ref}>
											{state.dataList.map((item: Report.StatDataInfo) => {
												return (
													<div
														class="list-row flex alarming"
														onClick={() => {
															gotoMap(item);
														}}
													>
														<div class="prefix">
															{item.title == "设备上线" ? <div class="level-img level-1">{item.title}</div> : null}
															{item.title == "设备下线" ? <div class="level-img level-2">{item.title}</div> : null}
															{item.title == "设备告警" ? <div class="level-img level-3">{item.title}</div> : null}
														</div>
														<div class="flex-1 event-content">{item.name}</div>
														<div class="operate" title="处理">
															{dataFormat("time", item.time)}
														</div>
													</div>
												);
											})}
										</div>
										{state.dataList.length ? null : <div class="empty">{proxy?.$t("common.chart_content.nodata")}</div>}
										<div ref={ts2Ref}></div>
									</div>
								</el-scrollbar>
							);
						}
					}}
				</ItemBlock>
			);
		};
	}
});
